<template>
	<div>
		<div class="topTitle">提现管理</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="请输入用户ID、昵称、手机号" class="width300 mr20"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable">
				<el-table-column prop="id" label="用户ID" align="center"></el-table-column>
				<el-table-column prop="name" label="头像/昵称" align="center">
					<template slot-scope="scope">
						<div class="row-me row-center">
							<el-image :src="scope.row.headImg||''" :preview-src-list="[scope.row.headImg||'']"
								class="width60 height60 margin-right10 radius50Per">
							</el-image>
							<span>{{scope.row.userName}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="userPhone" label="用户电话" align="center"></el-table-column>
				<el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
				<el-table-column prop="amount" label="提现金额" align="center"></el-table-column>
				<el-table-column label="提现方式" align="center">
					<template slot-scope="scope">
						{{scope.row.type == 1 ? '支付宝' : '微信'}}
					</template>
				</el-table-column>
				<el-table-column prop="account" label="提现账户" align="center"></el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 0">待审核</span>
						<span v-else-if="scope.row.status == 1">提现中</span>
						<span v-else-if="scope.row.status == 2">提现成功</span>
						<span v-else-if="scope.row.status == 3">未通过</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200" align="center">
					<template slot-scope="scope">
						<el-popconfirm title="确认通过?" @confirm="confirmWithdraw(scope.row)">
							<el-button type="text" slot="reference">审核通过</el-button>
						</el-popconfirm>
						<el-popconfirm title="确认驳回?" class="margin-left20" @confirm="rejectWithdraw(scope.row)">
							<el-button type="text" slot="reference">审核驳回</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				loading: true,
				query: {
					name: '',
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				token: localStorage.getItem('htk_token')
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 审核通过
			async confirmWithdraw(row) {
				const res = await this.$get('/admin/user/confirmWithdraw', {
					id: row.id
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			async rejectWithdraw(row) {
				const res = await this.$get('/admin/user/rejectWithdraw', {
					id: row.id
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			async getData() {
				const res = await this.$get('/admin/user/withdrawList', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list;
					this.pageTotal = res.data.totalRow;
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			handleRefresh() {
				this.query = {
					name: '',
					pageNumber: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 200px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 16px;
	}

	.red {
		color: #ff0000;
	}

	.green {
		color: green;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>